<template>
	<view class="search_list">
		<view class="tab_nav">
			<view class="" :style="'height:'+navBarInfo.statusBarHeight+'px;'"></view>
			<nav-bar nav_btn="back" :showShare="true" :record="2" :placeholder="keyword" :color="color" :auto_img="image" :style="'height:'+navBarInfo.statusBarHeight+'px;'"></nav-bar>
		</view>	
		<view style="margin-top: 180upx;">
			<view class="" style="background-color: #fff;position: fixed;z-index: 100;">
				<view class="search_max_box flex flexjus">
					<view class="serch_max_list flex" v-for="(item, index) in screen_list" :key="index">
						<view class="flex" @click.stop="searchActive(index, item.type)">
							<view :class="[searchIndex === index ? 'serch_title_active' : 'search_title', 's26', 'f400', 'family']">{{ item.txt }}</view>
							<view class="search_icon"><image class="search_icon_img" :src="item.img"></image></view>
						</view>
					</view>
				</view>
				<view class="classification_box w100 flex">
					<view class="scroll_box">
						<scroll-view class="scroll-view_H flex" scroll-x="true">
							<block v-for="(item, index) in navClassList" :key="index">
								<view
									:class="[catId === item.id ? 'scroll-view-item_H_acitve' : 'scroll-view-item_H', 'uni-bg-red', 's24', 'family', 'f500', 'txtali']"
									@click="active(item.id, item.name)"
								>
									{{ item.name }}
								</view>
							</block>
						</scroll-view>
					</view>
					<view class="sx_box flex" @click="open">
						<view class="sx_txt s24 family f500">筛选</view>
						<view class="sx_icon"><image class="w100 h100" src="/pages/filePages/static/xs.png" mode=""></image></view>
					</view>
				</view>
			</view>
		</view>
		<view class="goods_list_box">
			<view class="goods_box flex" v-for="(item, index) in goodsList" :key="index" @click="getGoodsDetail(item)">
				<view class="goods_image_box"><image class="img_goods" :src="item.image_src" mode=""></image></view>
				<view class="goods_detail_box">
					<view class="goods_name s28 familytow fblod">{{ spceType(item.title,item.difference,item.spec_type) }}</view>
					<view class="shop_name s24 family f500">#{{ item.shopname }}</view>
					<view class="price_box flex">
						<view class="price_red s44 familytow fblod">
							<text class="s24 familytow fblod">￥</text>
							{{ item.price }}
						</view>
						<view class="line_price s24 family f500">￥{{ item.market_price }}</view>
					</view>
					<view class="ll_fx_box flex">
						<view class="ll_box flex">
							<view class="li_icon"><image class="w100 h100" src="/pages/filePages/static/fengxiang.png" mode=""></image></view>
							<view class="li_txt s20 family f500">{{ item.views }}</view>
						</view>
						<view class="ll_box flex" style="margin-left: 132upx;">
							<view class="li_icon"><image class="w100 h100" src="/pages/filePages/static/chakan.png" mode=""></image></view>
							<view class="li_txt s20 family f500">{{ item.to_num }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="s28 family fblod txtali" style="margin-top: 70%;" v-if="goodsList && goodsList.length == 0">暂无商品!</view>
		
		<view class="fixed">
			<uni-popup ref="popup" type="right" background-color="#1B1B1B">
				<view class="" style="height: 100vh;display: flex;flex-direction: column;">
					<view class="" style="height: 110rpx;">
						
					</view>
					<!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"> -->
					<view class="scroll-Y">
						<view class="right_popup_box">
							<view class="content_box" style="padding-bottom: 40rpx;">
								<!-- <view class="flex">
									<view
										:class="[ranKingIndex == index ? 'header_box_active' : 'header_box','s24','family','f400','txtali']"
										v-for="(item,index) in ranKingList" :key="index" @click="ranQie(index)">
										{{item.name}}
									</view>
								</view> -->
								<!-- <view class="price_range_box">
									<view class="price_range_title s26 familytow fblod">
										价格区间
									</view>
									<view class="price_range_box flex">
										<input class="price_min_box txtali" placeholder-class="s22 family f400"
											placeholder-style="color:rgba(255, 255, 255, 0.5);" type="number"
											placeholder="最低价" />
										<view class="xian"></view>
										<input class="price_max_box txtali" placeholder-class="s22 family f400"
											placeholder-style="color:rgba(255, 255, 255, 0.5);" type="number"
											placeholder="最高价" />
									</view>
								</view> -->
								<!-- 子分类 -->
								<view class="goods_type_box" v-if="classList && classList.state && classList.state.length > 0">
									<view class="goods_type_title s26 familytow fblod">子分类</view>
									<view class="goods_type_list flex">
										<!-- @click="switchCard(index, indexs)" -->
										<view
											:class="[items.checkedd ? 'lists_box_active' : 'lists_box', 's24', 'family', 'f400', 'txtali']"
											v-for="(items, indexs) in classList.state"
											:key="indexs"
											@click="handleStateBrank(items)"
										>
											{{ items.name }}
										</view>
									</view>
								</view>
								<!-- 品牌 -->
								<view class="goods_type_box" v-if="classList && classList.brand && classList.brand.length > 0">
									<view class="goods_type_title s26 familytow fblod">品牌</view>
									<view class="goods_type_list flex">
										
										<view
											:class="[items.checkedd ? 'lists_box_active' : 'lists_box', 's24', 'family', 'f400', 'txtali']"
											v-for="(items, indexs) in classList.brand"
											:key="indexs"
											@click="handleStateBrank(items)"
										>
											{{ items.name }}
										</view>
									</view>
								</view>
								<!-- 属性 -->
								<!-- <view class="goods_type_box" v-for="(item, index) in classList.attribute" :key="index">
									<view class="goods_type_title s26 familytow fblod">{{ item.name }}</view>
									<view class="goods_type_list flex">
										<view
											:class="[items.flag ? 'lists_box_active' : 'lists_box', 's24', 'family', 'f400', 'txtali']"
											v-for="(items, indexs) in item.value"
											:key="indexs"
											@click="switchCard(index, indexs)"
										>
											{{ items.name }}
										</view>
									</view>
								</view> -->
								<!-- <view class="goods_type_box">
									<view class="goods_type_title s26 familytow fblod">
										能效等级
									</view>
									<view class="goods_type_list flex">
										<view class="lists_box s24 family f400 txtali" v-for="(item,index) in 3"
											:key="index">
											占位
										</view>
									</view>
								</view> -->
								<view class="goods_type_box">
									<view class="goods_type_title s26 familytow fblod">属性</view>
								</view>
								<view class="bottom_list_box">
									<view
										class="header_bot_txt"
										:style="{ height: item.type ? '100%' : '32rpx', overflow: item.type ? '' : 'hidden' }"
										v-for="(item, index) in classList.attribute"
										:key="index"
									>
										<view class="flexjus">
											<view class="left_txt s22 family f500">{{ item.name }}</view>
											<view class="genduo_txt s20 family f500" @click="falgType(index)">
												{{ item.typeName }}
												<uni-icons :type="item.icon" color="#FFF" size="10" style="margin-left: 6upx;"></uni-icons>
											</view>
										</view>
										<!-- <view class=""> -->
										<view class="content_list flexjus">
											<block v-for="(items, indexs) in item.value" :key="indexs">
												<view
													:class="[items.flag ? 'content_list_box_active' : 'content_list_box', 'txtali', 's24', 'family', 'f400']"
													@click="switchCardTwo(index, indexs)"
												>
													{{ items.name }}
												</view>
											</block>
										</view>
										<!-- </view> -->
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- </scroll-view> -->
					<view class="bottom_box flex">
						<view class="left_btn s26 family f500 txtali" @click="reset">重置</view>
						<view class="right_btn s26 family f500 txtali" @click="toUpdate">确定</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import screenList from '@/components/screen.vue';
export default {
	components: {
		screenList
	},
	data() {
		return {
			image: '/pages/filePages/static/left_jian.png',
			color: 'black',
			navBarInfo: {},
			placeholder: '商品名/品牌/商品种类/关键字',
			screen_list: [
				{
					img: '/static/shopping/jiage.png',
					txt: '价格排序',
					type: 'price'
				},
				{
					img: '/static/shopping/zuixin.png',
					txt: '最新上架',
					type: 'createtime'
				},
				{
					img: '/static/shopping/pingfen.png',
					txt: '人气爆款',
					type: 'views'
				},
				{
					img: '/static/shopping/renqi.png',
					txt: '评分最高',
					type: 'comment'
				}
			],
			ranKingIndex: 0,
			ranKingList: [
				{
					name: '热榜'
				},
				{
					name: '限时'
				},
				{
					name: '推荐'
				}
			],
			height: '32rpx',
			hidden: 'hidden',
			keyword: '',
			goodsList: [],
			classList: {},
			botList: [],
			catId: 0,
			Array: [],
			Array1: [],
			searchIndex: -1,
			navClassList: [],
			flagType: true,
			searchType: "",
			shopId:0,
		};
	},
	onLoad(options) {
		this.navBarInfo = this.$navBarInfo;
		this.keyword = options.keyword;
		this.shopId = options.shopId;
		// 获取筛选  1-2
		// 获取导航  1-1
		this.getNavList();
	},
	methods: {
		handleStateBrank(item){
			item.checkedd = !item.checkedd
			this.$forceUpdate()
		},
		getSearchList(){
			let that = this;
			uni.showLoading({
				title: '加载中...'
			});
			
			let Array = []
			that.classList.attribute.forEach(item => {
				item.value.forEach(items => {
					if (items.flag) {
						Array.push(items.name);
					}
				});
			});
			
			const catID = that.classList.state.filter(item => item.checkedd).map(item => item.id)
			const barnkId = that.classList.brand.filter(item => item.checkedd).map(item => item.id)
			
			that.$request({
				url: 'product/lists',
				method: 'POST',
				data: {
					keywords: that.keyword,
					cat_id: catID.length > 0 ? catID : that.catId,
					category_attribute: Array,
					brand_id: barnkId,
					order: that.flagType ? 'ase' : 'desc',
					sort: that.searchType,
					shop_id:that.shopId
				}
			}).then(res => {
				if (res.data.code == 1) {
					that.goodsList = res.data.data.data;
					uni.hideLoading();
				}
			});
		},
		active(id, name) {
			this.catId = id;
			this.getSearch();
		},
		searchActive(ind, type) {
			console.log(ind, type)
			if(this.searchType != type){
				this.flagType = true
			}else{
				this.flagType = !this.flagType;
			}
			this.searchType = type
			this.searchIndex = ind
			this.getSearchList()
		},
		getNavList() {
			let that = this;
			that.$request({
				url: 'product/b_seaech',
				method: 'POST',
				data: {
					keywords: that.keyword
				}
			}).then(res => {
				res.data.data.forEach(item => {
					item.flag = false;
				});
				that.navClassList = res.data.data;
				that.navClassList.unshift({id:'',name:'全部'})
				that.catId = res.data.data[0].id
				that.getSearch();
			});
		},
		getSearch() {
			let that = this;
			that.$request({
				url: 'product/search',
				method: 'POST',
				data: {
					category_id: that.catId,
				}
			}).then(res => {
				if (res.data.code == 1) {
					res.data.data.attribute.forEach(key => {
						key.type = false;
						key.typeName = '展开';
						key.icon = 'bottom';
						key.value.forEach(items => {
							items.flag = false;
						});
					});
					that.classList = res.data.data;
					that.classList.state.forEach(items => {items['checkedd'] = false})
					that.classList.brand.forEach(items => {items['checkedd'] = false})
					
					that.getSearchList(that.catId)
				}
			});
		},
		getGoodsDetail(item) {
			uni.navigateTo({
				url: '/pages/filePages/goodsDetail/goodsDetail?id=' + item.id + '&type=0&sku_id='+item.sku_id
			});
		},
		falgType(index) {
			this.classList.attribute[index].type = !this.classList.attribute[index].type;
			this.classList.attribute[index].typeName == '展开' ? (this.classList.attribute[index].typeName = '收起') : (this.classList.attribute[index].typeName = '展开');
			this.classList.attribute[index].icon == 'bottom' ? (this.classList.attribute[index].icon = 'top') : (this.classList.attribute[index].icon = 'bottom');
		},
		switchCard(index, indexs) {
			this.classList.attribute[index].value[indexs].flag = !this.classList.attribute[index].value[indexs].flag;
		},
		switchCardTwo(index, indexs) {
			this.classList.attribute[index].value[indexs].flag = !this.classList.attribute[index].value[indexs].flag;
		},
		reset() {
			let that = this;
			that.classList.attribute.forEach(item => {
				item.value.forEach(items => {
					items.flag = false;
				});
			});
			that.classList.state.forEach(item => {item['checkedd'] = false});
			that.classList.brand.forEach(item => {item['checkedd'] = false});
			this.$refs.popup.close();
			that.getSearchList();
		},
		toUpdate() {
			this.$refs.popup.close();
			this.getSearchList();
		},
		ranQie(ind) {
			this.ranKingIndex = ind;
		},
		open() {
			this.$refs.popup.open('right');
		}
	}
};
</script>

<style scoped lang="scss">
.search_list {
	overflow: hidden;

	.fixed {
		position: relative;
		z-index: 999;

		.bottom_box {
			width: 494upx;
			height: 76upx;
			background: #1b1b1b;
			border-radius: 38upx;
			border: 2upx solid #cd9c61;
			margin-left: 30upx;
			margin-bottom: 80rpx;

			.left_btn {
				width: 248upx;
				height: 76upx;
				border-radius: 38upx 0upx 0upx 38upx;
				color: #e4b77f;
				line-height: 76upx;
			}

			.right_btn {
				width: 248upx;
				height: 76upx;
				background: linear-gradient(154deg, #e4b77f 0%, #cd9c61 100%);
				border-radius: 0upx 38upx 38upx 0upx;
				line-height: 76upx;
				color: #ffffff;
			}
		}

		.scroll-Y {
			flex: 1;
			overflow-y: scroll;
			.right_popup_box {
				width: 526upx;
				padding-left: 32upx;
				.content_box {
					.bottom_list_box {
						margin-top: 18upx;
						height: 100%;
						padding-right: 32upx;

						.header_bot_txt {
							margin-bottom: 60upx;

							.content_list {
								margin-top: 34upx;
								flex-wrap: wrap;

								.content_list_box {
									width: 154upx;
									height: 52upx;
									background: #151515;
									border-radius: 26upx;
									color: rgba(255, 255, 255, 0.8);
									line-height: 52upx;
									margin-bottom: 20upx;
								}

								.content_list_box_active {
									width: 154upx;
									height: 52upx;
									background: #e4b77f;
									border-radius: 26upx;
									color: rgba(255, 255, 255, 0.8);
									line-height: 52upx;
									margin-bottom: 20upx;
								}
							}

							.left_txt {
								color: rgba(255, 255, 255, 0.8);
							}

							.genduo_txt {
								color: rgba(255, 255, 255, 0.8);
							}
						}
					}

					.goods_type_box {
						margin-top: 46upx;

						.goods_type_title {
							color: #ffffff;
						}

						.goods_type_list {
							margin-top: 34upx;
							flex-wrap: wrap;

							.lists_box {
								width: 154upx;
								height: 52upx;
								background: #151515;
								border-radius: 26upx;
								color: rgba(255, 255, 255, 0.8);
								line-height: 52upx;
								margin-right: 16upx;
								margin-bottom: 22upx;
							}

							.lists_box_active {
								width: 154upx;
								height: 52upx;
								background: #e4b77f;
								border-radius: 26upx;
								color: rgba(255, 255, 255, 0.8);
								line-height: 52upx;
								margin-right: 16upx;
								margin-bottom: 22upx;
							}
						}
					}

					.price_range_box {
						margin-top: 48upx;

						.price_range_title {
							color: #ffffff;
						}

						.price_range_box {
							margin-top: 34upx;

							.price_min_box {
								width: 214upx;
								height: 54upx;
								background: #151515;
								border-radius: 26upx;
								line-height: 54upx;
								color: #ffffff;
							}

							.xian {
								width: 22upx;
								height: 4upx;
								border-bottom: 2upx solid #8a8a8a;
								margin: 22upx 26upx 0 26upx;
							}

							.price_max_box {
								width: 214upx;
								height: 54upx;
								background: #151515;
								border-radius: 26upx;
								line-height: 54upx;
								color: #ffffff;
							}
						}
					}

					.header_box {
						width: 154upx;
						height: 52upx;
						background: #151515;
						border-radius: 26upx;
						line-height: 52upx;
						color: rgba(255, 255, 255, 0.8);
						margin-right: 24upx;
						border: 2upx solid #151515;
					}

					.header_box_active {
						width: 154upx;
						height: 52upx;
						background: rgba(231, 60, 51, 0.1);
						border-radius: 26upx;
						line-height: 52upx;
						color: rgba(255, 255, 255, 0.8);
						margin-right: 24upx;
						border: 2upx solid #e7b77d;
					}
				}
			}
		}
	}

	.tab_nav {
		width: 100%;
		height: 190upx;
		background-color: #e7b77d;
		position: fixed;
		top: 0;
		z-index: 99;
	}

	.goods_list_box {
		width: 686upx;
		padding-left: 32upx;
		padding-right: 32upx;
		margin-top: 350upx;

		.goods_box {
			margin-bottom: 40upx;

			.goods_image_box {
				width: 256upx;
				height: 256upx;
				border-radius: 8upx;
				background-color: #666;

				.img_goods {
					width: 256upx;
					height: 256upx;
					border-radius: 8upx;
				}
			}

			.goods_detail_box {
				margin-left: 20upx;

				.goods_name {
					width: 410upx;
					color: #333;
					letter-spacing: 0;
					overflow: hidden;
					display: -webkit-box;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.shop_name {
					width: 232upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-top: 14upx;
					color: #e7b77d;
				}

				.price_box {
					margin-top: 20upx;

					.price_red {
						color: #ff3f4a;
					}

					.line_price {
						color: #999999;
						text-decoration: line-through;
						margin-top: 14upx;
						margin-left: 20upx;
					}
				}

				.ll_fx_box {
					margin-top: 26upx;

					.li_icon {
						width: 32upx;
						height: 32upx;
					}

					.li_txt {
						color: #666;
						margin-top: 4upx;
						margin-left: 6upx;
					}
				}
			}
		}
	}
	.search_max_box {
		padding: 32upx 40upx 0 28upx;
		box-sizing: border-box;
		align-items: center;
		.serch_max_list {
			align-items: center;
			.search_title {
				color: #999999;
			}
			.serch_title_active {
				color: #333333;
			}
			.search_icon {
				width: 32upx;
				height: 32upx;
				margin-left: 4upx;
				.search_icon_img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.classification_box {
		height: 46upx;
		margin-top: 18upx;
		background-color: #fff;
		padding: 20upx 0 20upx 0;

		.sx_box {
			width: 118upx;
			height: 46upx;
			background: #ffffff;
			border-left: 2upx solid #dcdcdc;

			.sx_txt {
				color: #666;
				line-height: 46upx;
				margin-left: 12upx;
			}

			.sx_icon {
				width: 20upx;
				height: 21upx;
				margin-left: 4upx;
			}
		}

		.scroll_box {
			width: 632upx;
			height: 46upx;

			.scroll-view_H {
				width: 100%;
				white-space: nowrap;

				.scroll-view-item_H {
					display: inline-block;
					padding-left: 22upx;
					padding-right: 22upx;
					height: 46upx;
					background: #f4f4f4;
					border-radius: 23upx;
					line-height: 46upx;
					color: #666;
					margin-left: 32upx;
				}

				.scroll-view-item_H_acitve {
					display: inline-block;
					padding-left: 22upx;
					padding-right: 22upx;
					height: 46upx;
					background: #ebbe87;
					border-radius: 23upx;
					line-height: 46upx;
					color: #fff;
					margin-left: 32upx;
				}
			}
		}
	}
}
</style>
